<template>
  <div>
    <v-touch class="role" @tap="roleTouch" :style="roleStyle"></v-touch>
    <transition name="roleBounce">
      <div v-if="roleIndex.isTouch" @touchend="roleTouch" class="roleExp" :style="roleExpStyle"></div>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import { mixins } from "@/common/mixins/roleMixins.js"
export default {
  mixins: [mixins],
  computed: {
    //角色详细卡属性
    roleExpStyle() {
      return {
        position: "absolute",
        background: "url(" + this.roleIndex.roleExpImg + ") 0 0/100% 100%",
        width: this.roleIndex.expWidth,
        height: this.roleIndex.expHeight,
        left: this.roleIndex.expLeft,
        top: this.roleIndex.expTop
      }
    },
  },
  methods: {
    //角色点击
    roleTouch: function () {
      //角色详情卡是否展示
      this.roleIndex.isTouch = !this.roleIndex.isTouch
      if (this.roleDialogue.length > 0) {
        this.touchAnima()
        this.setIndexDialogue(this.roleDialogue[0])
        this.parseTextAudio({ play: false })
        this.diologMusic({ src: this.roleDialogue[0].audioUrls }).then(() => {
          this.touchAnimaEnd()
          this.setIndexDialogue({})
        })
      }
      else {
        this.touchAnima()
        setTimeout(() => { this.touchAnimaEnd() }, 500)
      }
      this.collectRole()
    },
    ...mapActions("wordStatus", ["setIndexDialogue"])
  }
};
</script>
    
<style scoped lang='stylus'></style>